---
description: A quick guide on how to use Tailwind CSS in your browser extension.
---

import { Callout } from "nextra-theme-docs"

# Quickstart with TailwindCSS

Using Tailwind CSS is super easy with Plasmo thanks to the built-in integration with PostCSS. The setup is identical to the [official Tailwind CSS docs guide](https://tailwindcss.com/docs/installation/using-postcss).

You can use any PostCSS plugins as well such as Autoprefixer, PurgeCSS, and more. This guide will walk you through the steps to get started with Tailwind CSS.

<Callout emoji="🎉">Easy Tailwind CSS in Chrome Extension!</Callout>

## Example

- To see a complete example of this quickstart, go to the [with-tailwindcss example](https://github.com/PlasmoHQ/examples/tree/main/with-tailwindcss).

## Create a Plasmo Project with TailwindCSS

```bash
pnpm create plasmo --with-tailwindcss
```

## Manual Installation

If you already have a Plasmo extension project and would like to add TailwindCSS manually, this section is for you!

### Add Dependencies

```bash
pnpm i -D tailwindcss postcss autoprefixer
```

### Generate your tailwind.config.js file

```bash
npx tailwindcss init
```

### Defining Your PostCSS Config

```js filename="postcss.config.js"
/**
 * @type {import('postcss').ProcessOptions}
 */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
```

<Callout emoji="⚠️">

Ensure your file name extension is not `.cjs` but rather .js - the config may otherwise be erroneously parsed as JSON and fail.

</Callout>

### Setting up Tailwind config

```js filename="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.tsx"],
  plugins: []
}
```

### Adding Root Styles

```css filename="style.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Usage

### In Extension Pages

Once you have all the configs in place, start using Tailwind within your React components! Below is an example of how to use Tailwind on the popup page:

```tsx filename="popup.tsx"
import { useReducer } from "react"

import "./style.css"

function IndexPopup() {
  const [count, increase] = useReducer((c) => c + 1, 0)

  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}

export default IndexPopup
```

### In Content Scripts UI

To use Tailwind in a [Content Scripts UI](/csui), you will need to import the `style.css` file as text data, and expose it to the CSUI lifecycle via the `getStyle` method to inject the style into the CSUI shadowDOM:

```tsx filename="content.tsx"
import cssText from "data-text:~style.css"
import { useReducer } from "react"

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

const PlasmoOverlay = () => {
  const [count, increase] = useReducer((c) => c + 1, 0)

  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}

export default PlasmoOverlay
```
